<template>
    <van-nav-bar title="新增地址" :fixed="true" left-arrow @click-left="router.back()"/>
    <van-address-edit
      class="mt46"
      :area-list="areaList"
      show-set-default
      show-search-result
      :area-columns-placeholder="['请选择', '请选择', '请选择']"
      area-placeholder="选择省 / 市 / 区"
      :tel-maxlength=11
      :address-info="{
        name:form.name,
        tel:form.phone,
        addressDetail:form.address,
        isDefault:form.is_default,
        province:form.province,
        city:form.city,
        county:form.county
      }"
      @save="onSave"
      />
  </template>
      
  <script setup lang='ts'>
  // vant提供的中国省市区数据
  import { areaList } from '@vant/area-data';
  import { useRouter } from 'vue-router';
  import { createAddress } from '@/api/my'
  import { ref,onMounted, reactive } from 'vue';
  import { IaddressDetail,InitCreateAddress } from '@/types/my';
  import { Toast } from 'vant';
  
    const router = useRouter()
  
    let form = reactive(new InitCreateAddress())
    const searchResult = ref([]);
    
    // 点击保存
    let onSave = async (content:IaddressDetail) => {
      if(content.isDefault === true){
        content.isDefault = 1
      }else if(content.isDefault === false){
        content.isDefault = 0
      }
      let list:IaddressDetail = {
        name:content.name,
        address:content.addressDetail,
        phone:content.tel,
        province:content.province,
        city:content.city,
        county:content.county,
        is_default:content.isDefault
      }
      let res = await createAddress(list)
      if(res.status === 200){
        Toast.success("保存成功！")
      }else if(res.status === 422){
        Toast.fail(res.data.errors.phone[0])
      }
      router.back()
    }
    onMounted(() => {
    })
</script>
      
<style scoped lang="less">
/deep/ .van-button--danger {
    background-color: #1989fa !important;
    border-color: #1989fa;
}
</style>